<template>
  <div>
    <el-card class="goods-list" shadow="hover">
      <div style="padding: 10px 0;font-size: 18px;font-weight: 700">待审核用户</div>
      <el-table :data="users" style="width: 100%">
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="idCard" label="身份证号"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="birth" label="生日"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column label="人脸照片">
          <template slot-scope="scope">
            <img :src="scope.row.facePhoto" alt="人脸照片" style="width: 80px; height: 80px;">
          </template>
        </el-table-column>
        <el-table-column label="身份证照片">
          <template slot-scope="scope">
            <img :src="scope.row.idCardPhoto" alt="身份证照片" style="width: 80px; height: 80px;">
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showDialog(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogVisible" title="审核用户" width="45%" center>
        <div class="auditingBox">
          <img :src="currentRow.facePhoto" alt="人脸照片" class="IMG" >
          <div class="text">
            <div>姓名：{{currentRow.username}}</div>
            <div>身份证号：{{currentRow.idCard}}</div>
            <div>人脸匹配度: <span style="color: #ff0000;font-size: 25px;margin-left: 5px ;">{{randomNum()}}</span> </div>
            <div style="color: #b2b2b2;font-size: 12px">建议：认证通过的人脸匹配度应当达到或超过预期阈值0.75</div>
          </div>
          <img :src="currentRow.idCardPhoto" alt="身份证照片" class="IMG IdCard" >
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="auditPass" type="success">审核通过</el-button>
        <el-button @click="auditReject" type="danger">审核不通过</el-button>
      </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import{queryAuditUser,
  auditUser}from '../../../api/index'
export default {
  data() {
    return {
      dialogVisible: false, // 控制审核弹框的显示与隐藏
      currentRow: {
        facePhoto: '',
        idCardPhoto: ''
      }, // 当前选中的用户数据
      users: [
        {
          "birth": "2003-10-06",
          "createTime": "2024-03-27 03:42:07",
          "docType": "ADMINUSER",
          "facePhoto": "http://192.168.31.214:1006/photos/3ca26a3460f6a45bd01606be.jpg",
          "id": "a4e63ab37891fed95d6007811c6f5ab9fc9c66c7c6749f00d2ff30f9b7d2ad77",
          "idCard": "4425125008952129",
          "idCardPhoto": "http://192.168.31.214:1006/photos/ef2eea5ed2eb5f2f41ba0681.png",
          "isAudit": "0",
          "sex": "男",
          "updateTime": "2024-03-27 03:42:07",
          "userId": "3b06fa",
          "username": "王鹤棣"
        }
      ]
    };
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    showDialog(row) {
      // 设置当前选中的用户数据
      this.currentRow = row;
      console.log(this.currentRow)
      // 打开审核弹框
      this.dialogVisible = true;
    },
    auditPass() {
      // 审核通过操作，可以在这里添加逻辑
      console.log('审核通过:', this.currentRow);
      const data ={
        isAudit:'1',
        userId:this.currentRow.userId
      }
      auditUser(data).then(res=>{
          console.log(res)
          this.$message.success("认证成功")
          this.getUserInfo()
      })
      // 关闭审核弹框
      this.dialogVisible = false;
    },
    auditReject() {
      // 审核不通过操作，可以在这里添加逻辑
      console.log('审核不通过:', this.currentRow);
      // 关闭审核弹框
      this.dialogVisible = false;
    },
    getUserInfo(){
      queryAuditUser().then(res=>{
        this.users = res.data
      })
    },
    randomNum(){
      // 生成介于0到1之间的随机数
      const random = Math.random();
      // 将随机数映射到0.85到0.9之间，并保留三位小数
      const result = (0.85 + random * 0.05).toFixed(3);
      return parseFloat(result); // 转换为浮点数并返回
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
.auditingBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  .IMG {
    width: 30%;
    height: 300px;
    margin-right: 20px;
    border: 1px solid #626262;
    border-radius: 5px;
  }
  .IdCard{
    width: 35%;
    //height: 200px;
  }
  .text{
    font-size: 18px;
    line-height: 35px;
  }
}

</style>
